<template>
	<div class="new-area-wrap safe-area-bottom">
		<van-nav-bar :title="pageTitle" left-arrow fixed @click-left="onClickLeft" />
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<div>
				<div class="main_li" v-for="(item, index) in list" :key="index" @click="handleToItem(item.id)">
					<div class="main_img">
						<img :src="item.cover_url" alt="">
					</div>
					<div class="main_title">{{ item.name }}</div>
					<div class="main_price">￥{{ item.price }}</div>
					<div class="main_label_cash">
						<div class="main_label" v-for="(items, indexs) in item.labels" :key="indexs">{{ items.name }}
						</div>
						<div v-if="item.xjq_deduction > 0" class="good-cash">
							<img src="../../images/cash_icon.png" alt="">
							<div>现金券抵¥{{ item.xjq_deduction }}</div>
						</div>
					</div>
				</div>
			</div>
		</van-pull-refresh>
	</div>
</template>

<script>
import { GOOD_LIST } from '@/api/home';
export default {
	components: {
	},
	data() {
		return {
			type: '',
			current: 0,
			bannerList: [],
			sortStatus: 'default',

			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,
			pageTitle: '',
			jump_content: this.$route.query.jump_content,
			refreshing: false
		}
	},
	activated() {
		this.type = this.$route.query.type;
		this.pageTitle = localStorage.getItem('shopName')
		// this.getBanner();
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			if (from.name == 'home' || from.name == 'shopSettleVoiceDevice' || from.name == null) {
				vm.resetInit();
			}
		})
	},
	methods: {
		onClickLeft() {
			this.$router.back()
		},


		resetInit() { //重置
			this.page = 1;
			this.list = [];
			this.finished = false;

			this.loadingPage = true;
			this.ajaxGoodList()
		},
		handleToItem(id) {
			localStorage.setItem('goodmsg', 1)
			this.$router.push({
				name: 'good',
				query: {
					id: id
				}
			})

		},
		// 列表请求
		ajaxGoodList(refresh = false) {
			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;
			if (this.$route.query.jump_content == 'goods_list_type') {
				params['type'] = this.$route.query.type
			} else if (this.$route.query.jump_content == 'goods_list_flag') {
				params['flag'] = this.$route.query.type

			}
			// if (this.type === 'gold') {
			// 	params['type'] = 1;
			// } else if (this.type === 'new') {
			// 	params['type'] = 2;
			// } else if (this.type === 'device') {
			// 	params['type'] = 11;
			// }


			if (this.current === 0) {
				params['sort_type'] = 1;
			} else if (this.current === 1) {
				params['sort_type'] = 2;
			} else if (this.current === 2) {
				params['sort_type'] = 4;
			}

			if ((this.current == 2) && this.sortStatus != 'default') {
				if (this.sortStatus == 'sortUp') {
					params['sort_rule'] = 1;
				} else if (this.sortStatus == 'sortDown') {
					params['sort_rule'] = 0;
				}
			}

			this.$http.post(GOOD_LIST, params)
				.then(res => {
					const {
						list
					} = res.data;

					if (list && list.length) {
						this.page++;
						// 刷新操作，直接替换列表
						if (refresh) {
							this.list = list;
						} else {
							this.list = this.list.concat(list);
						}
						// 加载状态结束
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				})
		},
		// 下拉刷新
		onRefresh() {
			this.page = 1;
			this.finished = false;

			this.$http.post(GOOD_LIST, {
				page_num: 1,
				page_size: this.pageSize,
				...(this.$route.query.jump_content == 'goods_list_type' ? { type: this.$route.query.type } : {}),
				...(this.$route.query.jump_content == 'goods_list_flag' ? { flag: this.$route.query.type } : {}),
				sort_type: this.current === 0 ? 1 : (this.current === 1 ? 2 : 4),
				...((this.current == 2) && this.sortStatus != 'default' ?
					{ sort_rule: this.sortStatus == 'sortUp' ? 1 : 0 } : {})
			}).then(res => {
				const { list } = res.data;
				if (list && list.length) {
					this.page = 2;
					this.list = list;
					if (list.length < this.pageSize) {
						this.finished = true;
					}
				}
				this.refreshing = false;
			}).catch(() => {
				this.refreshing = false;
			});
		}
	}

}
</script>

<style lang="scss">
.new-area-wrap {
	min-height: 100vh;
	padding-top: 46px;
	background-color: #F5F5F5;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.my-swipe {
		width: 7.02rem;
		margin: auto;

		.banner-li {
			display: block;
			width: 7.02rem;
			height: 2.8rem;
		}
	}

	.main_li {
		width: 95%;
		// height: 5rem;
		// padding: .24rem;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: .16rem;
		padding-bottom: .18rem;
		margin-top: .24rem;
		margin-bottom: .28rem;

		.main_img {
			background: url('../../images/icon_zt.png') no-repeat top;
			background-size: cover;
			display: flex;
			width: 100%;
			height: 4.44rem;
			justify-content: center;
			border-radius: .12rem;
			// padding-top: .54rem;
			padding-bottom: .12rem;

			// overflow: hidden;
			img {
				// display: inline-block;
				width: 100%;
				padding: 0 .12rem;
				padding-top: .54rem;
				// width: 95%;
				height: 100%;
				border-radius: .16rem;
				object-fit: cover;
				box-sizing: border-box;
			}
		}


		.main_title {
			padding: 0 .24rem;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: .28rem;
			color: #333333;
			margin-top: .24rem;
			margin-bottom: .08rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.main_price {
			padding: 0 .24rem;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: .32rem;
			color: #FD1A1A;
		}

		.main_label_cash {
			display: flex;
			align-items: center;
			margin-top: 0.08rem;

			.main_label {
				box-sizing: border-box;
				padding: 0.02rem .12rem;
				margin-left: .24rem;
				display: inline-block;
				border-radius: .06rem;
				border: 1px solid #31A653;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .22rem;
				color: #31A653;
			}

			.good-cash {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				font-size: 0.24rem;
				color: #F9301B;
				font-weight: 400;
				width: fit-content;
				height: 0.4rem;
				background-color: #ffedea;
				border-radius: 0.04rem;
				padding: 0 0.20rem 0 0.14rem;
				margin-left: 0.16rem;

				img {
					width: 0.28rem;
					height: 0.28rem;
					margin-right: 0.1rem;
				}
			}
		}


	}


}
</style>